import router, { asyncRoutes } from './router'
import store from '@/store'
import NProgress from 'nprogress' // 导入进度条包
import getPageTitle from '@/utils/get-page-title.js'

import 'nprogress/nprogress.css' // 引入进度条样式

const writeList = ['/login', '/404'] // 白名单

// 路由全局前置守卫
router.beforeEach(async (to, from, next) => {
  NProgress.start()
  const token = store.getters.token
  if (token) { // 已登录
    if (to.path === '/login') {
      next('/')
      NProgress.done() // 重定向会导致路由守卫再次执行,再次开启一个进度条,跳转后关闭
    } else {
      next()
      if (!store.getters.name) await store.dispatch('user/getUserInfoActions')
      if (!store.getters.isHaveAsyncRoute) {
        store.commit('app/SET_ASYNCROUTE') // 修改状态,已经挂载了动态路由规则
        const menusArr = store.getters.menus // 获取用户具有的页面权限数组
        // 在所有的动态路由规则数组中匹配用户权限规则数组
        const asyncRoutesArr = asyncRoutes.filter(item => {
          return menusArr.includes(item.children[0].name.toLowerCase())
        })
        // 当动态路由加载完成之后,在末尾添加404路由规则
        asyncRoutesArr.push({ path: '*', redirect: '/404', hidden: true })
        router.addRoutes(asyncRoutesArr) // 动态添加路由规则 --> 这里已经获取到所有的规则,但是动态改变不能够监听到,所以下面用vuex渲染

        // 使用vuex的目的(响应式):为了让左侧导航里拿到静态+动态的路由规则对象
        store.commit('permission/setRoutes', asyncRoutesArr)
        // 当上面都执行完毕,重定向到当前刷新的页面
        next({
          path: to.path,
          replace: true // next() 相当于this.$router.replace()
        })
      }
    }
  } else { // 未登录
    if (writeList.includes(to.path)) { // includes(xx) 如果当前数组里有xx元素,则返回true,否则false
      next()
    } else {
      next('/login')
      NProgress.done()
    }
  }
})

// 路由全局后置守卫
router.afterEach((to, from) => {
  NProgress.done()
  document.title = getPageTitle(to.meta.title)
})
